<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { app } from '../../../main';

onMounted(() => {
    const docLayer = new Zondy.Map.Doc("", "guanggu", {
        crossOrigin: "Anonymous"
    })
    const key='147dde407bf702b98d8cad64612b1b8c'
    const map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: `http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${key}`,
                    wrapX: false,
                    /* 执行地图下载 需要加上跨域参数 */
                    crossOrigin: "Anonymous"
                })
            }),
            new ol.layer.Tile({
                title: "天地图矢量图层注记",
                source: new ol.source.XYZ({
                    url: `http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${key}`,
                    wrapX: false,
                    /* 执行地图下载 需要加上跨域参数 */
                    crossOrigin: "Anonymous"
                })
            }),
            new ol.layer.Tile({
                title: "天地图影像图层",
                source: new ol.source.XYZ({
                    url: `http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${key}`,
                    wrapX: false,
                    /* 执行地图下载 需要加上跨域参数 */
                    crossOrigin: "Anonymous"
                }),
                visible: false
            }),
            new ol.layer.Tile({
                title: "天地图影像图层注记",
                source: new ol.source.XYZ({
                    url: `http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${key}`,
                    wrapX: false,
                    /* 执行地图下载 需要加上跨域参数 */
                    crossOrigin: "Anonymous"
                }),
                visible: false
            }),
            docLayer
        ],
        view: new ol.View({
            center: [114.37, 30.50],
            zoom: 13,
            projection: "EPSG:4326"
        })
    })
    app.provide("$map", map)
    app.provide('$docLayer',docLayer)
})
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;

  :deep(.ol-zoom) {
    top: 100px;
    left: auto;
    right: 10px;
  }

  :deep(.ol-zoom-extent) {
    left: auto;
    right: 10px;
    top: 160px;
  }
}
</style>
